<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
{
  tag: 'DIV',
  attrs:{
  id:'app'
  },
  children: [
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] }
      ]
    },
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] },
        { tag: 'A', children: [] }
      ]
    }
  ]
}
把上诉虚拟Dom转化成下方真实Dom
<div id="app">
  <span>
    <a></a>
  </span>
  <span>
    <a></a>
    <a></a>
  </span>
</div>
-->
<script>
    const data = {
        tag: 'DIV',
        attrs:{
            id:'app'
        },
        children: [
            {
                tag: 'SPAN',
                children: [
                    { tag: 'A', children: [] }
                ]
            },
            {
                tag: 'SPAN',
                children: [
                    { tag: 'A', children: [] },
                    { tag: 'A', children: [] }
                ]
            }
        ]
    }
    function JSON2DOM(data) {
        if (!data || Object.prototype.toString.call(data) !== '[object Object]'){
            return;
        }
        const {tag, attrs = {}, children} = data
        //? 创建元素
        let el = document.createElement(tag)
        //? 循环添加属性
        for (let attr in attrs) {
            console.log(attrs.hasOwnProperty(attr))
            if (attrs.hasOwnProperty(attr))
            el.setAttribute(attr,attrs[attr])
        }
        //? 下级标签
        if (children) {
            //? 添加进el
            Array.from(children).forEach((item,index) => {
                el.appendChild(JSON2DOM(item))
            })
        }
        return el
    }
    console.log(JSON2DOM(data));
</script>
</body>
</html>
